<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONTable test</title>
<style type="text/css">
table{
    table-layout:fixed;
}

.tab {
    width: 80%;
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    margin:0 auto 0 auto; 
}

.tab th {
    background: #5ea4ce;
    text-align: center;
    border: 1px solid #c0c0c0;
    font-weight:bold;
}

.tab td {
    padding-left: 5px;
    text-align: left;
    border: 1px solid #c0c0c0;
}

.tab tr td:hover {
    background-color: blue;
}

.tab tr:nth-child(odd){
    background : green;
}

.tab tr:nth-child(even){
    background: yellow;
}
</style>
</head>
<body>
    <table id='tab' class="tab"></table>
    <script src="../jslib/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="json_table_0.2.js"></script>
	<script type="text/javascript">
    var jsonData ={ 
        title : {'count' : '名次', 'prize' : '奖品', 'rank' : '排名','rankstr' : 'rankstr_', 'type' : 't'},
		data : [
				{"count":1,"prize":"联想（Lenovo）乐Pad A2107 7英寸平板电脑","rank":1,"rankstr":null,"type":0},
	     		{"count":1,"prize":"音乐花园壁挂苹果音响iphone音箱台灯","rank":2,"rankstr":null,"type":0},
	     		{"count":1,"prize":"音乐花园壁挂苹果音响iphone音箱台灯","rank":3,"rankstr":null,"type":0},
	     		{"count":1,"prize":"音乐花园壁挂苹果音响iphone音箱台灯","rank":4,"rankstr":null,"type":0},
	     		{"count":1,"prize":"玩加（wocol）能量之星 12000mAh 移动电源","rank":5,"rankstr":null,"type":0},
	     		{"count":1,"prize":"玩加（wocol）能量之星 12000mAh 移动电源","rank":6,"rankstr":null,"type":0},
	     		{"count":1,"prize":"玩加（wocol）能量之星 12000mAh 移动电源","rank":7,"rankstr":null,"type":0},
	     		{"count":1,"prize":"玩加（wocol）能量之星 12000mAh 移动电源","rank":8,"rankstr":null,"type":0},
	     		{"count":1,"prize":"玩加（wocol）能量之星 12000mAh 移动电源","rank":9,"rankstr":null,"type":0},
	
	    		{"count":5000,"prize":"5000蜜蜂币","rank":10,"rankstr":null,"type":1},
	    		{"count":5000,"prize":"5000蜜蜂币","rank":11,"rankstr":null,"type":1},
	    		{"count":5000,"prize":"5000蜜蜂币","rank":12,"rankstr":null,"type":1},
	    		{"count":5000,"prize":"5000蜜蜂币","rank":13,"rankstr":null,"type":1}
    		]
    };
/*
    jsonTable.init = {
            tabId : 'tab', 
            jData : {
                data : jsonData.data
            }
    };
*/

/*
jsonTable.init = {
         tabId : 'tab', 
         jData : {
             title : jsonData.title, 
             data : jsonData.data
         }
 }; 
*/ 

/*
jsonTable.init = {
        tabId : 'tab', 
        jData : {
            title : ['rank','prize','count','rankstr','type'], 
            data : jsonData.data
        }
}; 
*/

/*//列值包装
    jsonTable.init = {
            tabId : 'tab', 
            jData : {
                title : jsonData.title, 
                data : jsonData.data
            },

            dataFormat : {
                type : function(){
                    var row = arguments[0];
                    var colKey = arguments[1];
                    switch(row[colKey]){
                    case 1 : return "送蜜蜂币";
                    case 0 : return "送礼";
                    default : return "";
                    }
                }
            }
    };
*/
    /**
    手动调整列显示顺序
    添加虚拟列,序号
    */
    jsonTable.init = {
            tabId : 'tab', 
            jData : {
                title : (function(){
                	var titleJsonArray = jsonTable.titleDataTransform(jsonData.title);
                	var col1 = {"operator" : '查看详情'};
                	var col2 = {'orderNum' : '序号'};
                	titleJsonArray.splice(0, 0, col2);
                	titleJsonArray.push(col1);
                    return titleJsonArray;
                    })(), 
                data : jsonData.data
            },

            dataFormat : {
            	operator : function(){
                	return "详情";
                },
                orderNum : function(){
                    return jsonTable.constants.auto;
                }
            }
    };

/*0.3 feature list:
 * 刷新数据
 * 流行的分页集成
 *
 */
    jsonTable.construct();
   </script>
</body>
</html>